<template>
  <div class="test-page">
    <a-row justify="center" align="middle" style="min-height: 100vh;">
      <a-col :xs="22" :sm="16" :md="12" :lg="8" :xl="6">
        <a-card :bordered="false">
          <a-result
            status="success"
            title="测试页面"
            sub-title="如果您能看到这个页面，说明Vue应用正常运行。"
          >
            <template #extra>
              <a-space>
                <a-button type="primary" @click="goToLogin">
                  去登录页面
                </a-button>
                <a-button @click="goToRegister">
                  去注册页面
                </a-button>
              </a-space>
            </template>
          </a-result>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const goToLogin = (): void => {
  router.push('/login')
}

const goToRegister = (): void => {
  router.push('/register')
}
</script>

<style scoped>
.test-page {
  background: linear-gradient(135deg, var(--primary-color-light, #d6e6f2) 0%, var(--primary-color-dark, #769fcd) 100%);
  min-height: 100vh;
  padding: 20px;
}
</style>
